<template>
    <view class="page" :style="{'padding-top':navigationbarHeight+'px'}" @touchstart="startTouch" @touchend="endTouch">
        <TopBar :PageNum.sync="Num" :showName='showName'></TopBar>
<!--        <view class="headers">-->
<!--            <Search></Search>-->
<!--            &lt;!&ndash;        导航栏&ndash;&gt;-->
<!--            <view class="header-nav">-->
<!--                <view :class="Num== 0?'on':''" @click="onNavitem(0)">关注</view>-->
<!--                <view :class="Num== 1?'on':''" @click="onNavitem(1)">推荐</view>-->
<!--            </view>-->
<!--            &lt;!&ndash;        end&ndash;&gt;-->
<!--        </view>-->

        <view class="contain">
<!--            关注圈子内容-->
            <view class="contain-follow" v-if="FollowShow">
<!--                最近浏览列表-->
                <view class="follow-visit">
                    <view class="follow-visit-title">
                        <text class="title">我的圈子</text>
<!--                        <view class="icon-eye" @click="onEyesshow">-->
<!--                            <img src="/static/img/eye-up.png" :class="Eyes== 0?'on':''"/>-->
<!--                            <img src="/static/img/eye-down.png" :class="Eyes== 1?'on':''"/>-->
<!--                        </view>-->
                    </view>
                    <view class="follow-visit-list" v-if="Eyeshow">
                        <view class="follow-list-content" v-if="EyeList.length==0"><text class="null">暂无浏览记录</text></view>
                        <view class="follow-list-content" v-if="EyeList.length>0">
                            <view class="visit-list-item" v-for="item in EyeList" :key="item.id" @click="skipLoop(item.id)">
                                <img :src="item.thumb_img_url" mode="aspectFill">
                                <text>{{item.name}}</text>
                                <span>{{item.desc}}</span>
                            </view>
                            <view class="visit-list-item" @click="skipRecord">
                                <img src="http://rzkeji.oss-cn-shenzhen.aliyuncs.com/web/bbMachine/more-circle.png">
                                <text class="more">更多</text>
                            </view>
                        </view>
                    </view>
                </view>
<!--                end-->

                <view class="follow-list">
<!--                关注圈子列表元素-->
                    <!--                    查看筛选栏-->
                    <view class="follow-visit-sort" v-if="createCircle.length > 0">
                        <text class="title">建圈动态</text>
<!--                        <view class="visit-sort-select" @click="onSelectshow">-->
<!--                            <text>{{SelectTitle}}</text>-->
<!--                            <img style="width: 16px;height: 16px" src="/static/img/down.png">-->
<!--                            <view class="select-item" v-if="Selectshow">-->
<!--                                <text data-name="最新发帖" @click="onSelectTitle">最新发帖</text>-->
<!--                                <text data-name="浏览热度" @click="onSelectTitle">浏览热度</text>-->
<!--                                <text data-name="最近浏览" @click="onSelectTitle">最近浏览</text>-->
<!--                                <text data-name="热门推荐" @click="onSelectTitle">热门推荐</text>-->
<!--                            </view>-->
<!--                        </view>-->
                    </view>
                    <!--                    end-->

                    <!--我创建圈子情况-->
                    <view class="my-create-circle" v-if="createCircle.length > 0">
                        <view class="create-circle-item" v-for="(item,index) in createCircle" :key="index">
                            <view class="circle-item-left">
                                <img v-if="item.status!=1" src="/static/img/face.jpg"/>
                                <img v-if="item.status==1"  :src="item.circleInfo.thumb_img_url" mode="aspectFill"/>
                            </view>
                            <view class="circle-item-center">
                                <view class="item-center-name">{{item.circle_name}}</view>
                                <view :class="{'item-center-status':true,'background-green':item.status==0}" v-if="item.status==0">
                                    <img v-if="item.status==0" src="http://rzkeji.oss-cn-shenzhen.aliyuncs.com/web/bbMachine/wait-white.png" />
                                    <text>{{item.progress_name}}</text>
                                </view>
                                <view :class="{'item-center-status':true,'background-yellow':item.status==1}"  v-if="item.status==1" @click.stop="toCircleOperations(item.circle_id)">
                                    <img v-if="item.status==1" src="http://rzkeji.oss-cn-shenzhen.aliyuncs.com/web/bbMachine/nostart-white.png" />
                                    <text>{{item.progress_name}}</text>
                                </view>
                                <view :class="{'item-center-status':true,'background-grey':item.status==2}"  v-if="item.status==2">
                                    <img v-if="item.status==2" src="http://rzkeji.oss-cn-shenzhen.aliyuncs.com/web/bbMachine/fail-white.png" />
                                    <text>{{item.progress_name}}</text>
                                </view>
                            </view>
                            <view class="circle-item-right">
                                <view class="item-right-btn on" v-if="item.status==1" @click="skipLoop(item.circle_id)">进圈</view>
<!--                                <view class="item-right-btn" v-if="item.status!=1">进圈</view>-->
                            </view>
                        </view>
                    </view>
                    <!--end-->
                    <view class="follow-visit-sort">
                        <text class="title">圈子动态</text>
                        <!--                        <view class="visit-sort-select" @click="onSelectshow">-->
                        <!--                            <text>{{SelectTitle}}</text>-->
                        <!--                            <img style="width: 16px;height: 16px" src="/static/img/down.png">-->
                        <!--                            <view class="select-item" v-if="Selectshow">-->
                        <!--                                <text data-name="最新发帖" @click="onSelectTitle">最新发帖</text>-->
                        <!--                                <text data-name="浏览热度" @click="onSelectTitle">浏览热度</text>-->
                        <!--                                <text data-name="最近浏览" @click="onSelectTitle">最近浏览</text>-->
                        <!--                                <text data-name="热门推荐" @click="onSelectTitle">热门推荐</text>-->
                        <!--                            </view>-->
                        <!--                        </view>-->
                    </view>
                    <view class="follow-list-item" v-if="CircleBarList.length == 0">
                        <view class="list-item-null">
                            <img  src="http://rzkeji.oss-cn-shenzhen.aliyuncs.com/web/bbMachine/bibiji-null.png" />
                            <text>暂无关注圈子</text>
                        </view>
                    </view>
                    <view class="follow-list-item" v-if="CircleBarList.length > 0" v-for="item in CircleBarList" :key="item.id" @click.stop="skipLoop(item.circleInfo.id)">
                        <view class="list-item-head-g">
                            <view class="item-head-portrait-b">
                                <img :src="item.circleInfo.thumb_img_url" mode="aspectFill"/>
                            </view>
                            <view class="item-head-name">
                                <p>{{item.circleInfo.name}}</p>
                                <text>{{item.circleInfo.article_num>9999 ? (item.circleInfo.article_num/10000)+'W': item.circleInfo.article_num}}帖子</text>
                            </view>
                            <view class="item-follow">
                                <text>进圈</text>
<!--                                <button @click.stop="unFollowCircle(item.circleInfo.id)" type="warn" size="mini">取消关注</button>-->
                            </view>
                        </view>
                        <view class="line" v-if="item.theNewPostArticle.length == 0 ? false : true"></view>
<!--                        <view class="list-item-null" v-if="item.theNewPostArticle.length == 0 ? true : false">-->
<!--                            <img mode="widthFix" src="http://rzkeji.oss-cn-shenzhen.aliyuncs.com/web/bbMachine/bibiji-null.png" />-->
<!--                            <text>暂无最新帖子内容</text>-->
<!--                        </view>-->
                        <view class="list-item-center" v-if="item.theNewPostArticle.length == 0 ? false : true" @click.stop>
                            <Invitation :isLabel="false" :Article.sync="item.theNewPostArticle" :nowSite="popularSite" :levelShow="levelShow" :show="true"></Invitation>
                        </view>
                    </view>
                    <!--                end-->
                </view>
            </view>
<!--            end-->

<!--            热门推荐圈子内容-->
            <view class="contain-recommend" v-if="RecommendShow">
                <view v-for="(item,index) in RecommendList" :key="index" v-if="item.circle.length>=4">
                    <view class="contain-recommend-a" v-if="index%2==0">
                        <view class="recommend-title">
                            <text class="title">{{item.classify_name.name}}</text>
                            <view class="recommend-change" @click="onExchange(item.classify_name.id,index,1)">换一换 <img src="http://rzkeji.oss-cn-shenzhen.aliyuncs.com/web/bbMachine/xunhuan.png" /></view>
                        </view>
                        <view class="recommend-body">
                            <view class="recommend-item-a" v-for="value in item.circle" :key="value.id" @click="skipLoop(value.id)">
                                <view class="recommend-a-img">
                                    <img :src="value.thumb_img_url">
                                </view>
                                <view class="recommend-a-text">
                                    <h4>{{value.name}}</h4>
                                    <text>{{value.desc}}</text>
                                </view>
                                <view class="recommend-a-btn">
                                    <view class="btn" v-if="value.is_follow==0" @click.stop="followCircle(value.id,index,item.classify_name.id)">关注</view>
                                    <view class="btn" v-if="value.is_follow==1" @click.stop="skipLoop(value.id)">进圈</view>
                                </view>
                            </view>
                        </view>
                    </view>
                    <view class="contain-recommend-b" v-if="index%2==1">
                        <!--                换一换按钮-->
                        <view class="recommend-title">
                            <text class="title">{{item.classify_name.name}}</text>
                            <view class="recommend-change" @click="onExchange(item.classify_name.id,index,1)">换一换 <img src="http://rzkeji.oss-cn-shenzhen.aliyuncs.com/web/bbMachine/xunhuan.png" /></view>
                        </view>
                        <!--                end-->
                        <!--                推荐列表-->
                        <view class="recommend-body">
                            <view class="recommend-body-item" v-for="value in item.circle" :key="value.id"  @click="skipLoop(value.id)">
                                <view class="body-item-a">
                                    <view class="item-a-img">
                                        <img :src="value.thumb_img_url">
                                    </view>
                                    <view class="item-a-text">
                                        <h4>{{value.name}}</h4>
                                        <p>关注{{value.user_num>9999 ? (value.user_num/10000)+'W': value.user_num}} 帖子{{value.article_num>9999 ? (value.article_num/10000)+'W': value.article_num}}</p>
                                        <text>{{value.desc}}</text>
                                    </view>
                                    <view class="item-a-button">
                                        <view class="btn" v-if="value.is_follow==0" @click.stop="followCircle(value.id,index,item.classify_name.id)">关注</view>
                                        <view class="btn" v-if="value.is_follow==1" @click.stop="skipLoop(value.id)">进圈</view>
                                    </view>
                                </view>
                            </view>
                        </view>
                        <!--                end-->
                    </view>
                </view>
                <view class="circlebar-created-btn">
                    <view class="created-btn" @click="toCreatedCircle">创建圈子</view>
                </view>
            </view>
<!--            end-->
        </view>
        <navBar></navBar>
    </view>
</template>

<script>
    import navBar from '@/pages/components/navBar/index.vue';
    import Invitation from "@/pages/components/invitationItems/invitation";
    import Search from "@/pages/components/search-input/search";
    import TopBar from "@/pages/components/topBar/topBar";
    export default {
        name: "circlebar",
        components: {TopBar, Search, Invitation, navBar},
        data(){
          return{
              navigationbarHeight: getApp().globalData.navStyle.navigationbarHeight,
              Num : 0,
              FollowShow:true,
              RecommendShow:false,
              RecommendList:[],
              Eyes: 0,
              Eyeshow: true,
              EyeList: [],
              Selectshow: false,
              SelectTitle: '最新发帖',
              // 关注圈子
              page: 1,
              CircleBarList: [],
              page_info: {
                  page: 1,
                  total: 0,
                  limit: 10
              },
              showName:'circle',
              touchstart: '',
              createCircle:[],
              levelShow: false,
			  popularSite:''
			  
          }
        },
        onLoad(query){
			uni.hideTabBar()
            // getApp().globalData.navBarIndex=1;
            // this.getCircleClassify();
        },
        mounted(){

        },
        onShow(){
            this.getFollowCircleList();
            this.recentCircle();
            this.getCircleClassify();
            this.getMyCircle()
            // if (getApp().globalData.Num){
            //     this.Num = getApp().globalData.Num;
            //     getApp().globalData.Num = "";
            // }
        },
        methods:{
            //滑动事件-开始
            startTouch(e){
                this.touchstart = e.changedTouches[0].clientX;
            },
            //滑动事件-结束
            endTouch(e){
                // let touchlength = e.changedTouches[0].clientX - this.touchstart;
                // if (touchlength>=100){
                //     if (this.Num==0){
                //         this.Num = 2;
                //     } else {
                //         this.Num--;
                //     }
                // }else if (touchlength<=-100){
                //     if (this.Num==2){
                //         this.Num = 0;
                //     } else {
                //         this.Num++;
                //     }
                // }
            },
            //页面数据的重更新
            onWXshow(){
                this.getFollowCircleList();
                this.recentCircle();
                this.getMyCircle()
            },
            //获取关注圈子列表
            async getFollowCircleList(){
              let params = {
                  page: this.page,
                  limit: 10,
                  user_token: uni.getStorageSync('userToken')
              }
              const res = await this.$api.getFollowCircleList(params);
              if (res.data.level == 'success'){
                  if (this.page_info.page < this.page){
                      this.CircleBarList = this.CircleBarList.concat(res.data.data);
                      this.page_info = res.data.page_info;
                  }else {
                      this.CircleBarList = res.data.data;
                      this.page_info = res.data.page_info;
                  }

              }else {
                  uni.showToast({
                      icon:'none',
                      title:res.data.message
                  })
              }
            },
            //获取我创建的圈子
            async getMyCircle(){
                let params = {
                    user_token: uni.getStorageSync('userToken')
                }
                const res = await this.$api.getMyCircle(params);
                if (res.data.level == 'success'){
                    console.log(res)
                    this.createCircle = res.data.data;
                }else {
                    uni.showToast({
                        icon:'none',
                        title:res.data.message
                    })
                }
            },
            //获取圈子分类列表
            async getCircleClassify(){
                let params = {
                    user_token: uni.getStorageSync('userToken')
                }
                const res = await this.$api.getCircleClassify(params);
                if (res.data.level == 'success'){
                    this.RecommendList = [];
                    for (let i = 0; i<res.data.data.length; i++){
                        this.recommendCircle(res.data.data[i].id,i);
                    }
                }else {
                    uni.showToast({
                        icon:'none',
                        title:res.data.message
                    })
                }
            },
            //推荐圈子
            async recommendCircle(id,index,type=0){
                // console.log(type)
                let params = {
                    classify_id: id,
                    user_token: uni.getStorageSync('userToken')
                }
                const res = await this.$api.recommendCircle(params);
                if (res.data.level == 'success'){
                    if (type == 0){
                        // console.log("AAA")
                        let str = res.data.data;
                        if (str.length != 0){
                            if (str.circle.length>3){
                                this.RecommendList.push(res.data.data);
                            }
                        }
                    } else {
                        // console.log("VVV")
                        let str = this.RecommendList;
                        if (str.length != 0) {
                            if (res.data.data.circle.length>3){
                                str[index] = res.data.data;
                                this.RecommendList = [];
                                this.RecommendList = str;
                            }else {
                                str.splice(index,1);
                                this.RecommendList = [];
                                this.RecommendList = str;
                            }
                        }

                    }
                }else {
                    uni.showToast({
                        icon:'none',
                        title:res.data.message
                    })
                }
            },
            //关注圈子
            async followCircle(id,index,classId){
                let params = {
                    circle_id: id,
                    user_token: uni.getStorageSync('userToken')
                }
                const res = await this.$api.followCircle(params);
                if (res.data.level == 'success'){
                    uni.showToast({
                        icon:'success',
                        title:res.data.message
                    })
                    this.onWXshow();
                    this.recommendCircle(classId,index,1);
                } else {
                    uni.showToast({
                        icon:'none',
                        title:res.data.message
                    })
                }
            },
            //获取用户预览圈子列表
            async recentCircle(){
                let params = {
                    page: 1,
                    limit: 4,
                    user_token: uni.getStorageSync('userToken')
                }
                const res = await this.$api.recentCircle(params)
                if (res.data.level) {
                    console.log(res)
                    this.EyeList = res.data.data
                }else {
                    uni.showToast({
                        icon:'none',
                        title:res.data.message
                    })
                }
            },
            //预览显隐
            onEyesshow(){
                if (this.Eyes == 0 ){
                    this.Eyes = 1;
                    this.Eyeshow = false;
                } else {
                    this.Eyes = 0;
                    this.Eyeshow = true;
                }
            },
            //排序展开
            onSelectshow(){
                if (this.Selectshow == false){
                    this.Selectshow = true;
                }else {
                    this.Selectshow = false;
                }
            },
            //排序标题
            onSelectTitle(e){
                this.SelectTitle = e.currentTarget.dataset.name;
            },
            //进圈
            skipLoop(id){
                // this.keyWord = '';
                // this.LookUpShow = false;
                uni.navigateTo({
                    url: '/pages/circlebar/circlebarhome/circlebarhome?circle_id='+id
                })
            },
            //跳转更多圈子记录
            skipRecord(){
                uni.navigateTo({
                    url: '/pages/circlebar/circleRecord/circleRecord'
                })
            },
            //跳转创建圈子
            toCreatedCircle(){
                if (this.createCircle.length>0){
                    uni.showToast({
                        icon:'none',
                        title:"你已创建圈子，不能重复创建~"
                    })
                } else {
                    uni.navigateTo({
                        url: '/pages/circlebar/circlebarCreate/circlebarCreate'
                    })
                }

            },
            //跳转到试运营任务页面
            toCircleOperations(id){
                uni.navigateTo({
                    url: '/pages/circlebar/circleOperations/circleOperations?circle_id='+id
                })
            },
            //换一换按钮
            onExchange(id,index,type){
                this.recommendCircle(id,index,type);
            }
        },
        watch:{
            Num(newValue, oldValue) {
                if (newValue==0){
                    this.getFollowCircleList();
                    this.FollowShow = true;
                    this.RecommendShow = false;

                } else {
                    this.FollowShow = false;
                    this.RecommendShow = true;
                }
            }
        },
		onPageScroll(e) {
			this.popularSite = e.scrollTop;
		}
    }
</script>

<style lang="scss" scoped>
    .page{
        background: #F1F4F7;
        padding-bottom: 100rpx;
    }
    @import "../../static/scss/circlebarstyle";
</style>